
	<template>
	  <div class="player_box">
    <div class="my_palyer">
	      <!-- 音乐图片及音乐名等 -->
	      <div class="player_left">
	        <div id="box">
	          <img
	            src="https://ts1.cn.mm.bing.net/th/id/R-C.04b603dd72dc0337ef3b91d9fe7538fe?rik=UJYA1beegp8u%2fQ&riu=http%3a%2f%2fn.sinaimg.cn%2fsinakd20121%2f488%2fw640h648%2f20210309%2f15ed-kmeeius1808099.jpg&ehk=BUoT5xhPrpjBPRPisK0IhKAZNk21kG8xP%2fxYVxU%2bslw%3d&risl=&pid=ImgRaw&r=0"
	            alt="">
	        </div>
	        <div class="music_name">心引力（王俊凯）</div>
	      </div>
	      <!-- 播放按钮及菜单 -->
	      <div class="player_right">
	        <div class="player_btn" @click="playMusic">
	          <van-icon v-if="!isPlayer" name="play-circle-o" size="28" />
          <van-icon v-else name="pause-circle-o" size="28" />
        </div>
        <div class="player_menu" @click="clickMenu">
	          <van-icon name="bars" size="28" />
	        </div>
	      </div>
	    </div>
	
	    <van-popup v-model:show="showRight" position="right" :style="{ width: '40%', height: '80%' }" />
	  </div>
	</template>
	<script setup>
	import { ref } from 'vue'
	
	let isPlayer = ref(true)
	let isRotate = ref(true)
	// 弹出
	let showRight = ref(false)
	
	const playMusic = () => {
	  isPlayer.value = !isPlayer.value
	  // 调用旋转事件
	  toggleRotation()
	}
	// 旋转事件
	function toggleRotation() {
	  isRotate.value = !isRotate.value;
	  if (isRotate.value) {
	    document.getElementById('box').classList.remove('paused');
	  } else {
	    document.getElementById('box').classList.add('paused');
	  }
	}
		// 点击音乐列表
	const clickMenu = () => {
	  console.log('点击了音乐列表');
	  showRight.value = true
	}
	</script>
	<style scoped>
	.player_box {
	  height: 60px;
	  position: fixed;
	  padding: 10px;
	  bottom: 0;
	  background-color: #fff;
	  border-top: 1px solid #ccc;
	  width: 100%;
	  box-sizing: border-box;
	}
	
	.my_palyer {
	  display: flex;
	  justify-content: space-between;
	  align-items: center;
	}
	
	.my_palyer .player_left,
	.my_palyer .player_right {
	  display: flex;
	  align-items: center;
	}
	.player_left img {
	  width: 40px;
	  height: 40px;
	  border-radius:50%;
	}
	
	.music_name {
	  color: #000;
	  font-size: 15px;
	  font-weight: 500;
	  margin-left: 5px;
	}
	.player_btn {
	  margin-right: 10px;
	}
	#box {
	  animation: musicRotate 2s infinite linear;
	}
	
	#box.paused {
	  animation-play-state: paused;
	}
	/* 定义音乐图片旋转的动画 */
	@keyframes musicRotate {
	  0% {
	    transform: rotate(0deg);
	  }
	  100% {
	    transform: rotate(360deg);
	  }
	}
	</style>